<!-- 点餐页面 -->
<template>
  <view class="container">
    <uni-sidebar :active-key="activeDay" @change="onDayChange">
      <uni-sidebar-item v-for="day in days" :key="day.id" :title="day.name" />
    </uni-sidebar>

    <view class="content">
      <view class="meal-section" v-for="meal in mealsMapper" :key="meal.key">
        <view class="meal-title">{{ meal.name }}</view>
        <view class="meal-content">
          <view class="meal-item" v-for="item in meals[activeDay][meal.key]" :key="item.name">
            <uni-image :src="item.image" width="100%" height="150px" />
            <view class="meal-name">{{ item.name }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
	import { ref, onMounted } from 'vue';
	// import { uniSidebar, uniSidebarItem, uniImage } from '@dcloudio/uni-ui';

	const activeDay = ref(new Date().getDay() - 1); // 默认显示今天的菜单
	const days = ref([
		{ id: 0, name: '周一' },
		{ id: 1, name: '周二' },
		{ id: 2, name: '周三' },
		{ id: 3, name: '周四' },
		{ id: 4, name: '周五' },
		{ id: 5, name: '周六' },
		{ id: 6, name: '周日' }
	]);
	const mealsMapper = ref([
		{ key: 'breakfast', name: '早餐' },
		{ key: 'lunch', name: '午餐' },
		{ key: 'dinner', name: '晚餐' }
	]);
	const meals = ref({
		0: { breakfast: [], lunch: [], dinner: [] },
		1: { breakfast: [], lunch: [], dinner: [] },
		2: { breakfast: [], lunch: [], dinner: [] },
		3: { breakfast: [], lunch: [], dinner: [] },
		4: {
			breakfast: [{ name: '油条', image: '/assets/images/recipe/laozhixia.png' }],
			lunch: [{ name: '炒饭', image: '/assets/images/recipe/laozhixia.png' }],
			dinner: [{ name: '饺子', image: '/assets/images/recipe/laozhixia.png' }]
		},
		5: {
			breakfast: [
				{ name: '豆浆', image: '/assets/images/recipe/laozhixia.png' },
				{ name: '油条', image: '/assets/images/recipe/laozhixia.png' }
			],
			lunch: [{ name: '炒饭', image: '/assets/images/recipe/laozhixia.png' }],
			dinner: [{ name: '饺子', image: '/assets/images/recipe/laozhixia.png' }]
		},
		6: { breakfast: [], lunch: [], dinner: [] }
	});

	// 切换星期
	function onDayChange(event) {
		activeDay.value = event.detail;
		fetchMeals();
		// Fetch or update meals data based on the selected day
	}

	// 获取周菜单数据
	function fetchMeals() {
		// 这里可以添加获取菜单数据的逻辑
	}
	onMounted(() => {
		fetchMeals();
	});
</script>

<style scoped>
.container {
  display: flex;
}
.sidebar {
  width: 20%;
}
.content {
  width: 80%;
  padding: 10px;
}
.meal-section {
  margin-bottom: 20px;
}
.meal-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}
.meal-content {
  display: flex;
  flex-wrap: wrap;
}
.meal-item {
  width: 48%;
  margin-bottom: 10px;
}
.meal-name {
  text-align: center;
  margin-top: 5px;
}
</style>